<template>
  <div>
    <!-- 1.0面包屑 -->
    <my-breadcrumb level1="订单管理" level2="订单列表"></my-breadcrumb>
    <my-search @addSearch="getQuery"></my-search>
    <!-- 2.0tab表格 -->
    <el-table :data="ordersList" border style="width: 100%">
      <el-table-column type="index" label="#" width="80"></el-table-column>
      <el-table-column prop="order_number" label="订单编号" width="280"></el-table-column>
      <el-table-column prop="order_price" label="订单价格" width="100"></el-table-column>
      <el-table-column prop="pay_status" label="订单状态" width="100" :formatter="formatState"></el-table-column>
      <el-table-column prop="is_send" label="是否发货" width="100"></el-table-column>
      <el-table-column prop="order_fapiao_title" label="发票抬头" width="300"></el-table-column>
      <el-table-column label="下单时间" width="150">
        <!-- 用过滤器来格式化 -->
        <template slot-scope="scope">{{scope.row.create_time | dateFilter('/')}}</template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button icon="el-icon-setting" type="primary" size="mini" plain @click="setAddress"></el-button>
          <el-button size="mini" icon="el-icon-location " type="warning" plain @click="setMap"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 3.0分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[5, 10, 30, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 4.0 地址选择对话框 -->
    <el-dialog title="地址选择" :visible.sync="dialogVisibleAddress4add" width="60%">
      <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>
      <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleAddress4add = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleAddress4add = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 5.0地图框 -->
    <el-dialog title="地图" :visible.sync="dialogVisibleMap4add" width="60%">
     
      <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleMap4add = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleMap4add = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
//导入面包屑组件
import MyBreadcrumb from '../subcomponents/MyBreadcrumb'
import Mysearch from '../subcomponents/Mysearch'
import { regionDataPlus } from 'element-china-area-data'
export default {
  //注册子组件
  components: {
    'my-breadcrumb': MyBreadcrumb,
    'my-search': Mysearch
  },
  data() {
    return {
      query: '', //添加关键字
      pagenum: 1, //当前页码
      pagesize: 10, //页容量
      total: this.total, //总条数
      ordersList: [], //订单列表数据
      dialogVisibleAddress4add: false, //地址选择默认隐藏
      dialogVisibleMap4add:false,//地图默认隐藏
      options: regionDataPlus,
      selectedOptions: [],
      textarea:''
    }
  },
  created() {
    this.getOrdersListData(), this.setAddress()
  },
  methods: {
    //获取订单列表
    getOrdersListData() {
      this.$axios
        .get(`orders`, {
          params: {
            query: this.query,
            pagenum: this.pagenum,
            pagesize: this.pagesize
          }
        })
        .then(res => {
          console.log(res)
          this.ordersList = res.data.data.goods
          //获取总条数
          this.total = res.data.data.total
        })
    },
    //接收子组件传过来的关键字数据
    getQuery(query) {
      console.log(query)
      this.query = query
      this.getOrdersListData()
    },
    //当页面改变的时候
    handleSizeChange(pagesize) {
      this.pagesize = pagesize
      this.getOrdersListData()
    },
    //当当前页该百年的时候
    handleCurrentChange(pagenum) {
      this.pagenum = pagenum
      this.getOrdersListData()
    },
    // 用format格式化
    formatState(row, column) {
      if (row.pay_status == '1') {
        return '已支付'
      } else if (row.pay_status == '0') {
        return '未支付'
      }
    },
    //地址选择
    setAddress() {
      this.dialogVisibleAddress4add = true
    },
    handleChange(value) {
      console.log(value)
    },
    //地图
    setMap(){
      this.dialogVisibleMap4add=true
    }
  }
}
</script>
